<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/25
  Time: 14:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <style type="text/css">
        .pic, .pic1 {
            float: left;
        }

        .pic {
            width: 550px;
            height: 430px;
        }

        .pic img {
            width: 550px;
            height: 430px;
        }

        .pic1 {
            width: 138px;
            height: 130px;
        }

        .pic1 img {
            width: 138px;
            height: 130px;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<div style="margin: 0 auto;width: 90%;">
    <ol class="breadcrumb">
        <li><a href="#">商城</a></li>
        <li><a href="#">手机</a></li>
        <li class="active"><a href="#">手机</a></li>
    </ol>
</div>

<script type="text/javascript">

    $(function () {
        //鼠标经过小图，将小图切换到大图的位置显示
        //当获得多个元素时，给每个元素单独绑定，使用each遍历每个元素
        $(".pic1").each(function () {
            //当每个小图触鼠标经过事件
            //dom中表示当前对象：this；jquery中表示当前对象$(this)
            //onmouseenter=""---mouseenter()
            //onmouseover="函数()"---mouseover(function(){})
            $(this).mouseenter(function () {
                //将小div的内容给大div内容
                var val = $(this).html();//innerHTML--html()
                $(".pic").html(val);
            });

            /*$(this).mouseleave(function () {
             //
             });*/
        });  //each取出每个元


        //btn---是一个链接接标签
        $("#btn").click(function () {
            var urls = $(this).attr("href");//attr获得/设置某个属性
            //发起ajax请求
            /*$.get(url, {param:'add'}, function (data) {//login.jsp
                //请求成功后的数据赋值到data里
                if(data.code==-1) {
                    //返回login.jsp-->跳转页面
                    location.href=data.msg;//"login.jsp";//前端跳转页面
                }else if(data.code==1) {
                    //返回“加入成功”-->弹框
                    alert(data.msg);
                }
            },'json');//JSON.parse()*/
            $.ajax({
                url:urls,//发送请求地址
                data:{param:'add'},//携带参数
                success:function(res) {//请求成功回调函数
                    //请求成功后的数据赋值到data里
                    if(res.code==-1) {
                        //返回login.jsp-->跳转页面
                        location.href=res.msg;//"login.jsp";//前端跳转页面
                    }else if(res.code==1) {
                        //返回“加入成功”-->弹框
                        alert(res.msg);
                    }
                },
                type:'get',//请求方式
                dataType:'json',//返回数据格式
                beforeSend:function (xhr) {
                    xhr.setRequestHeader("xhr",xhr);
                }
            });
            return false;//取消链接标签的跳转功能
        });
    })
</script>

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-6">
            <div class="pic"><img src="/static/${goods.pic1}"></div>
            <div class="pic1"><img src="/static/${goods.pic2}"></div>
            <div class="pic1"><img src="/static/${goods.pic3}"></div>
            <div class="pic1"><img src="/static/${goods.pic4}"></div>
            <div class="pic1"><img src="/static/${goods.pic5}"></div>
        </div>
        <div class="col-xs-6 col-md-6">
            <div class="panel panel-default" style="height: 560px">
                <div class="panel-heading">商品详情</div>
                <div class="panel-body">
                    <h3>产品名称:
                        <small>${goods.gname}</small>
                    </h3>
                    <div style="margin-left: 10px;">

                        <p>市场价格:&nbsp;&nbsp;&nbsp;<span class="text-danger" style="font-size: 15px;"></span>&nbsp;&nbsp;&nbsp;<span
                                class="glyphicon glyphicon-yen"></span>${goods.price}</p>
                        <p>上市时间:&nbsp;&nbsp;&nbsp;${goods.pubdate}</p>
                        <p>热销指数:&nbsp;&nbsp;&nbsp;
                            <c:forEach begin="1" end="${goods.star}" step="1">
                                <span class="glyphicon glyphicon-star-empty"></span>
                            </c:forEach>
                        </p>
                        <p>详细介绍:${goods.info}</p>
                        <p>&nbsp;&nbsp;</p>
                        <a href="cart?gid=${goods.gid}" id="btn" class="btn btn-warning">加入购物车&nbsp;&nbsp;&nbsp;<span
                                class="glyphicon glyphicon-shopping-cart"></span></a>&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-danger">直接购买</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
